<template>
  <view class="pageBox">
    <view class="video">
      <map id="myMap" style="width: 100%; height: 100vh;position: relative;" :latitude="latitude" :longitude="longitude"
        :scale="mapscale" :markers="markers" :enable-3D="true" :enable-satellite='weiXing' :show-location="true"
        @tap="mapTap" :polyline="polyline" :polygons="polygons">
      </map>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    markRaw
  } from "vue";

  // import {
  //   historyList
  // } from '@/Api/setApi.js'


  export default {
    data() {
      return {
        equipmentId: '',
        title: 'map',
        latitude: 0,
        longitude: 0,
        mapscale: 14,
        // markers: [{
        //     id: 1,
        //     latitude: 0,
        //     longitude: 0,
        //     iconPath: '/static/icons/locate.png',
        //     width: 20,
        //     height: 20,
        //     callout: {
        //       display: 'ALWAYS',
        //     }
        //   },
        //   {
        //     id: 2,
        //     latitude: 30.125712999999983,
        //     longitude: 104.138703000,
        //     iconPath: '/static/icons/locate.png',
        //     width: 20,
        //     height: 20,
        //   },
        // ],
        polyline: [],
        includePoints: [],
        weiXing: false,
        wxInx: 0,
        numInx: 1,
        mapContext: null,
        ids: '',
        end: '',
        start: '',


        controls: [],
        markers: [],
        polygons: [],

        includePoints: [{
            longitude: 116.397,
            latitude: 39.9
          },
          {
            longitude: 116.397,
            latitude: 39.91
          },
          {
            longitude: 116.4,
            latitude: 39.91
          },
          {
            longitude: 116.4,
            latitude: 39.9
          }
        ]
      }
    },
    onReady() {
      // this.changeNavStyle()
      this.drawRectangle([{
          longitude: 116.397,
          latitude: 39.9
        },
        {
          longitude: 116.397,
          latitude: 39.91
        },
        {
          longitude: 116.4,
          latitude: 39.91
        },
        {
          longitude: 116.4,
          latitude: 39.9
        }
      ]);

      this.onMapLoaded()
    },
    onLoad(e) {
      console.log(e);
      // this.equipmentId = e.id
      // this.ids = e.ids
      // this.end = e.end
      // this.start = e.start
    },
    onShow() {
      // this.weiZhi()
      // this.historyListFun()
    },
    methods: {
      onMapLoaded() {
        const paths = [{
          "latitude": 39.90859291088599,
          "longitude": 116.39607723129177
        }, {
          "latitude": 39.902258715356325,
          "longitude": 116.39535169618341
        }, {
          "latitude": 39.90215269885111,
          "longitude": 116.40115597665465
        }, {
          "latitude": 39.90555840086452,
          "longitude": 116.39858205507687
        }]

        this.mapContext = uni.createMapContext('myMap', this);
        // 在地图加载完成后，将地图的中心点设置为标记的位置
        this.mapContext.includePoints({
          points: [{
              longitude: 116.397,
              latitude: 39.9
            },
            {
              longitude: 116.397,
              latitude: 39.91
            },
            {
              longitude: 116.4,
              latitude: 39.91
            },
            {
              longitude: 116.4,
              latitude: 39.9
            }
          ],
          padding: [50, 50, 50, 50]
        });
        console.log(this.mapContext)

        this.translateMarkerFun()

        let polyline = [{
          points: [],
          color: "#FF0000DD",
          width: 3,
          dottedLine: false
        }]
      },
      // 获取历史轨迹
      historyListFun() {
        // historyList({
        //   device_id: this.ids,
        //   addtime: this.start,
        //   endtime: this.end,
        // }).then(res => {})
      },
      mapTap(e) {
        console.log(e, 'klkl');
        const {
          longitude,
          latitude
        } = e.detail
        this.markers.push({
          id: this.markers.length + 1,
          latitude,
          longitude,
          iconPath: '/static/icons/locate.png',
          width: 20,
          height: 20,
        }, )



        console.log(this.markers)
      },
      translateMarkerFun(id) {
        let that = this
        let mpCtx = uni.createMapContext('myMap')

        // mpCtx.includePoints({
        //   points: [{
        //       latitude: that.markers[0].latitude,
        //       longitude: that.markers[0].longitude
        //     },
        //     {
        //       latitude: 30.125712999999983,
        //       longitude: 104.138703000
        //     },
        //   ],
        //   padding: [50, 50, 50, 50], // 地图视野调整的边距
        // });


        // 根据 path 添加 marker

        const path = [{
          "latitude": 39.90859291088599,
          "longitude": 116.39607723129177
        }, {
          "latitude": 39.902258715356325,
          "longitude": 116.39535169618341
        }, {
          "latitude": 39.90215269885111,
          "longitude": 116.40115597665465
        }, {
          "latitude": 39.90555840086452,
          "longitude": 116.39858205507687
        }]

        let polyline = [{
          points: [],
          color: "#FF0000DD",
          width: 3,
          dottedLine: false
        }]

        let i = 0
        let t = setInterval(() => {
          let index = i++
          this.markers.push({
            id: this.markers.length + 1,
            latitude: path[index].latitude,
            longitude: path[index].longitude,
            iconPath: '/static/icons/locate.png',
            width: 20,
            height: 20,
          })
          polyline[0].points.push(path[index])
          this.polyline = [...polyline]
          console.log(JSON.stringify(this.polyline))

          if (i >= 4) {
            clearInterval(t)
          }
          console.log(this.markers)
        }, 500)

        this.$forceUpdate();
      },
      weiZhi() {
        let that = this
        uni.getLocation({
          type: 'gcj02  ', // 返回可以用于uni.openLocation的经纬度
          success: function(res) {
            console.log('当前位置的经度：' + res.longitude);
            console.log('当前位置的纬度：' + res.latitude);
            that.latitude = 30.31013,
              that.longitude = 103.85311
            // that.longitude = res.longitude
            // that.latitude = res.latitude
            that.markers[0].longitude = res.longitude
            that.markers[0].latitude = res.latitude
            // that.markers[1].longitude = res.longitude
            // that.markers[1].latitude = res.latitude + 0.02

            that.polyline[0].points[0].longitude = res.longitude
            that.polyline[0].points[0].latitude = res.latitude
            // that.polyline[0].points[1].longitude = res.longitude
            // that.polyline[0].points[1].latitude = res.latitude + 0.02
            that.translateMarkerFun(1)
          },
          fail: function(res) {
            console.log(res);
          }
        });
      },
      //自定义导航栏，
      changeNavStyle() {
        this.navBackgroundColor = '#ff0000';
        uni.setNavigationBarTitle({
          title: '设备编号：' + this.equipmentId
        });
        uni.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#318cff'
        });
      },
      drawRectangle(points) {
        const paths = points.map(point => ({
          longitude: point.longitude,
          latitude: point.latitude
        }));
        this.polygons = [{
          points: paths,
          strokeWidth: 2,
          strokeColor: '#00ff00',
          fillColor: '#00ff00',
          opacity: 0.5
        }];
      }

    }
  }
</script>

<style lang="scss" scoped>
  .pageBox {
    display: flex;
    flex-direction: column;
  }

  .tit {
    background-color: #318CFF;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .video {
    background-color: #ebebeb;
    height: calc(100vh - 80rpx);
    // #ifdef H5
    height: calc(100vh - 168rpx);
    //#endif
  }
</style>